<template>
	<view class="install-container" style="margin-bottom: 30rpx;">
	
		<!-- 用户信息 -->
		<!-- 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，
		这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则 -->
		<uni-forms :value="params" ref="form" validateTrigger="bind" class="word5">
			<uni-forms-item required label="所属楼栋：" name="楼栋id">
				<view :class="label == '请选择所属楼栋' ? 'color':''" class="tap" @click="handleTap('picker')">{{label}}</view>
				<lb-picker ref="picker" @input="binddata('楼栋id',$event)" @click="handleTap('picker')" v-model="params['楼栋id']"
				 mode="selector" :list="buildList" :dataset="{ name: 'label' }" @confirm="handleConfirm" @cancel="handleCancel">
				</lb-picker>
			</uni-forms-item>
			<uni-forms-item required label="起始单元号：" name="起始单元号">
				<input type="number" maxlength="50" placeholder="请输入起始单元号" v-model="params['起始单元号']" @input="binddata('起始单元号',$event.detail.value)">
			</uni-forms-item>
			<uni-forms-item required label="单元数量：" name="单元数量">
				<input type="number" maxlength="18" v-model="params['单元数量']" placeholder="请输入单元数量" @input="binddata('单元数量',$event.detail.value)" >
			</uni-forms-item>
			<button class="grid-btn" @click="submitForm">提交</button>
		</uni-forms>

	</view>
</template>

<script>
	import DatePicker from '../myComponents/date-picker.vue'
	import LbPicker from '../components/lb-picker/index.vue'
	import dayjs from 'dayjs'
	export default {
		components: {
			LbPicker,
			DatePicker 
		},
		data() {
			return {
				label: '请选择所属楼栋',
				params: {
					起始单元号: null,
					单元数量: null,
					楼栋id: null
				},
				params1: {
					检查点id: null,
					网格id: null
				},
				buildList: [],
				//表单验证规则
				rules: {
					楼栋id: {
						rules: [{
							required: true,
							errorMessage: '请选择所属楼栋',
						}]
					},
					起始单元号: {
						rules: [{
							required: true,
							errorMessage: '请填写起始单元号',
						}]
					},
					单元数量: {
						rules: [{
							required: true,
							errorMessage: '请填写单元数量',
						}]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			this.params.检查点id = +options.id
			this.params1.检查点id = +options.id
			this.params1.网格id = uni.getStorageSync('gridInfo').所属网格id
			this.getBuildList()
			// console.log(options)
			// this.params.检查点名称 = options.name
		},
		onShow() {

		},
		methods: {
			handleTap(name) {
				this.$refs[name].show()
			},
			handleConfirm(e) {
				// console.log(this.params.户主关系)
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params.楼栋id = e.item.楼栋id
					if (name && label) {
						this[name] = label
					}
				}
			},
			getBuildList() {
				this.$http.post('gridSystem/building/list', this.params1).then(res => {
					if(res.code === 10000){
						console.log(res)
						if(res.data.list !== null) {
							res.data.list.forEach(item => {
								if(item.所属分区 !== '' && !item.所属分区.includes('区')) {
									item.所属分区 = item.所属分区 + '区'
								}
								if(!item.楼栋号.includes('栋')) {
									item.楼栋号 = item.楼栋号 + '栋'
								}
								item.value = item.所属分区 + item.楼栋号
								item.label = item.所属分区 + item.楼栋号
							})
						}
						this.buildList = res.data.list
					}
				})
			},
			submitForm(form) {
				console.log('this.resident', this.resident)
				// 手动提交表单
				this.$refs.form.submit().then(res => {
					// res.检查点id = this.params.检查点id
					res.楼栋id = this.params.楼栋id
					res.单元数量 = +res.单元数量
					console.log('表单数据信息：', res);
					this.addUnit(res)
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			},	
			addUnit(params) {
				uni.showLoading({
					mask: true
				})
				this.$http.post('gridSystem/unit/createbulk', params).then(res => {
					console.log(res)
					if (res.code === 10000) {
						uni.navigateBack({
							delta: 1
						})
						// uni.showToast({
						// 	title: '新建成功',
						// })
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.install-container {
		height: 100vh;
		background-color: #F8F8F8;
	}
	.color {
		color: #808080;
	}
	.tap {
		display: flex;
		align-items: center;
	}
</style>

